import {
  markerInfo,
  ANIMATION_DURATION,
  lerp,
  calculateBearing,
  updateTrailAndSegmentByPoints,
  updateTrailDisplay,
  createPopupInfo,
  removePopup,
  realTimeLayer,
  updatePopupPosition,
  updatePopupInfo,
  removeMarker
} from "./utilts";
import { onMapEvent, connectMap } from "../../mapbox_tool/eventManage/index";
import { LayerConfig, addLayer, LayerType } from "../layer/layerManage";
import { getLayerManagerState } from "../layer/layerManagerState";
import { getMap } from "../mapInitialization/index";


let currentHoveredId: string | null = null; // 存储当前悬停的要素 ID

// 导出一个函数，用于添加或修改标记
export const filterAddOrModify = (map: any, data: any) => {
  const { id, positions, info } = data;

  // 如果当前 ID 列表中包含 id
  if (markerInfo[id]) {
    // 如果 ID 存在，则更新位置
    // 获取上一帧的位置
    const previousPositions = markerInfo[id].positions;
    // 移动标记
    moveMarker(map, id, previousPositions, positions, ANIMATION_DURATION, info);
    markerInfo[id].positions = positions; // 更新上一帧位置
  } else {
    addMarker(map, data, info);
  }
};

// 定义一个addMarker函数，用于在地图上添加标记
export const addMarker = (map: any, data: any, info: any) => {
  // map：地图对象
  // data：标记数据
  // info：标记信息
  const { id, positions } = data;
  // 添加标记的 GeoJSON 数据源
  const source = {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: positions
          },
          properties: { ...info }
        }
      ]
    }
  };
  const layer: LayerConfig = {
    id: `${id}`,
    type: LayerType.Symbol,
    source: source,
    layout: {
      "icon-image": "airport-15", // 使用 Mapbox 自带的图标
      "icon-rotate": 0,
      "icon-rotation-alignment": "map",
      "icon-allow-overlap": true,
      "icon-ignore-placement": true,
      "icon-size": 2,
      'text-field': ['get', 'id'], // 显示 properties 中的 name 属性
      'text-font': ['MicrosoftYaHei'],
      'text-size': 16,
      'text-anchor': 'top', // 文本相对于标记的位置
      'text-offset': [0, -2.2], // 微调文本位置
      'text-allow-overlap': true, // 允许标签重叠显示
      'text-letter-spacing': 0.1, // 增加字母+间距
      'text-transform': 'uppercase' // 文本转为大写
    },
    paint: {
      'text-color': '#ffffff', // 文本颜色 - 白色
      'text-halo-color': '#000000', // 文本光晕颜色 - 黑色
      'text-halo-width': 2, // 增加光晕宽度
      'text-halo-blur': 1, // 添加光晕模糊效果
      'text-opacity': 0.95, // 略微降低不透明度以减少刺眼感
      'text-translate': [0, -5] // 向上微调位置
    }
  };
  // 添加标记的 symbol 图层
  addLayer(getLayerManagerState(map), layer);
  markerInfo[id] = { positions, trail: [], trailEnabled: true, popup: null, segments: [] }; // 初始化存储标记信息和航迹线

  // 给标记注册鼠标事件
  registerMouseEvents(id);
};

// 定义一个函数，用于移动标记
const moveMarker = (map: any, id: string, previousPositions: [number, number], positions: [number, number], duration: number, info: any) => {
  // 检查标记是否存在
  if (!markerInfo[id]) {
    console.error("标记不存在:", id);
    return;
  }
  // debugger;
  const startTime = Date.now();
  const updateInterval = 16; // 约 60fps
  let animationId: number | null = null;

  const update = () => {
    const elapsed = Date.now() - startTime;
    const progress = Math.min(elapsed / duration, 1);

    // 计算当前位置
    const currentPosition = [
      previousPositions[0] + (positions[0] - previousPositions[0]) * progress,
      previousPositions[1] + (positions[1] - previousPositions[1]) * progress
    ];

    // 直接更新标记位置
    const markerSource = map.getSource(id);
    if (markerSource) {
      markerSource.setData({
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: currentPosition
            },
            properties: info
          }
        ]
      });
    }

    // 更新标记的 popup 位置
    if (markerInfo[id].popup) {
      updatePopupPosition(map, id, currentPosition);
      updatePopupInfo(map, id, realTimeLayer(info))
    }

    // 更新标记朝向
    const bearing = calculateBearing(previousPositions, positions);
    map.setLayoutProperty(id, "icon-rotate", bearing);

    // 更新航迹线
    if (markerInfo[id].trailEnabled) {
      updateTrailAndSegmentByPoints(map, id, currentPosition, info);
      updateTrailDisplay(map, id, info);
    }

    // 如果动画未完成，继续更新
    if (progress < 1) {
      animationId = setTimeout(update, updateInterval);
    } else {
      // 动画完成后的清理工作
      animationId = null;
    }

  };

  // 立即执行第一次更新
  update();

  // 返回取消动画的函数
  return () => {
    if (animationId !== null) {
      clearTimeout(animationId);
      animationId = null;
    }
  };
};


// 激活鼠标事件
export const activateMouseEvents = (mapInstance: any) => connectMap(mapInstance); // 连接地图

// 注册鼠标事件
export const registerMouseEvents = (layerId: string) => {
  // 注册图层事件
  onMapEvent('mouseenter', handleMouseEnter, { layerId });
  onMapEvent('mouseleave', handleMouseLeave, { layerId });
}

// 鼠标进入事件处理函数
function handleMouseEnter(e: any) {
  // 如果地图为空，则返回
  if (getMap() == null) return;
  // 使用 queryRenderedFeatures 获取鼠标位置下方的所有要素
  const features = getMap().queryRenderedFeatures(e.point);

  // 如果有要素，则输出到控制台
  if (features && features.length > 0) {
    const obj = features.find(m => m.layer.type == "symbol");
    if (obj) {
      currentHoveredId = obj.properties.id;
      // 创建标记的 popup
      createPopupInfo(getMap(), obj.properties.id, obj.geometry.coordinates, realTimeLayer(obj.properties));
    }

  }
}


// 鼠标离开事件处理函数
function handleMouseLeave(e: any) {
  if (currentHoveredId) {
    removePopup(getMap(), currentHoveredId);
  }

}


export { createPopupInfo, removePopup, updatePopupInfo, updatePopupPosition, realTimeLayer, removeMarker, clearAllMarkersAndTrails } from "./utilts"